<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <script src="js/swiper.min.js"></script>
    <style>
        *{margin: 0;padding: 0}
        #ball,#ball_1{
            width: 600px;
            height: 400px;
            position: absolute;
            border-radius: 30px;
            opacity: 0.9;
        }
        #ball_1{
            overflow: hidden;
        }
        .swiper-slide{
            /*border-radius: 30px;*/
        }
    </style>
</head>
<body>
<div class="swiper-container" id="ball" style="left:0;top:0">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(images/01.png)"></div>
        <div class="swiper-slide" style="background-image:url(images/02.png)"></div>
        <div class="swiper-slide" style="background-image:url(images/03.png)"></div>
        <div class="swiper-slide" style="background-image:url(images/04.png)"></div>
        <div class="swiper-slide" style="background-image:url(images/05.png)"></div>
    </div>
</div>

<div class="swiper-container_1" id="ball_1" style="left:1320px;top:0">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(images/01.png)"></div>
        <div class="swiper-slide" style="background-image:url(images/02.png)"></div>
        <div class="swiper-slide" style="background-image:url(images/03.png)"></div>
        <div class="swiper-slide" style="background-image:url(images/04.png)"></div>
        <div class="swiper-slide" style="background-image:url(images/05.png)"></div>
    </div>
</div>
<script>
    var ball = document.getElementById("ball");
    var posX = parseInt(ball.style.left);
    var posY = parseInt(ball.style.top);
    var ball_1 = document.getElementById("ball_1");
    var posX_1 = parseInt(ball_1.style.left);
    var posY_1 = parseInt(ball_1.style.top);
    var i=0;
    var k=0;
    var H=5;
    var i_1=0;
    var k_1=0;
    var H_1=10;
    function start(){
        if(posX<=0){
            i=0;
        }
        if(posX>=1320){
            i=1;
        }
        if(i==1){
            posX -= H;
        }
        if(i==0){
            posX += H;
        }
        if(posY<=0){
            K=0;
        }
        if(posY>=550){
            K=1;
        }
        if(K==1){
            posY -= H;
//            ball.style.boxShadow="0 0 50px 10px red "
        }
        if(K==0){
            posY += H;
//            ball.style.boxShadow="0 0 50px 10px gold inset"
        }
        ball.style.left = posX + "px";
        ball.style.top = posY + "px";
//        ---------------------------------------------------------------
        if(posX_1<=0){
            i_1=0;
        }
        if(posX_1>=1320){
            i_1=1;
        }
        if(i_1==1){
            posX_1 -= H_1;
        }
        if(i_1==0){
            posX_1 += H_1;
        }
        if(posY_1<=0){
            K_1=0;
        }
        if(posY_1>=550){
            K_1=1;
        }
        if(K_1==1){
            posY_1 -= H_1;
            ball_1.style.boxShadow="0 0 100px 10px pink"
        }
        if(K_1==0){
            posY_1 += H_1;
            ball_1.style.boxShadow="0 0 80px 2px #333"
        }

//        H++;
//        H_1++;
        ball_1.style.left = posX_1 + "px";
        ball_1.style.top = posY_1 + "px";
    }
    var tim = setInterval(start,50);
</script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        loop: true,
        autoplay: 800,
        effect: 'cube'
    })
</script>
<script>
    var mySwiper = new Swiper('.swiper-container_1', {
        loop: true,
        autoplay: 1000,
        direction: 'vertical'
    })
</script>
</body>
</html>